<template>
  <div class="menu-List">
      <h2>{{title}}</h2>
      <ul>
        <li v-for="item in menuList" :key="item.id">
          <router-link :to="item.path">
            <p><a-icon :type="item.icon" style="font-size: 40px;"/></p>
            <p>{{item.name}}</p>
          </router-link>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'MenuList',
  props: {
    menuList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      menuChartList: [{
        id: 2001,
        name: '柱状图',
        icon: 'bar-chart'
      },
      {
        id: 2002,
        name: '饼图',
        icon: 'pie-chart'
      }]
    }
  },
  components: {
  },
  created () {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.menu-List{
  ul{
    margin-bottom: .6rem;
    display: flex;
    li{
      width: 150px;
      p{
        text-align: center;
        font-size: 18px;
        margin-top: 5px;
        color: skyblue;
      }
    }
  }
}
</style>
